<template>
  <view class="login-container">
    <!-- 顶部装饰 -->
    <view class="decoration-top"></view>
    
    <!-- 登录表单区域 -->
    <view class="login-form">
      <!-- 标题 -->
      <view class="login-title">欢迎登录</view>
      <view class="login-subtitle">请输入您的手机号进行登录</view>
      
      <!-- 手机号输入框 -->
      <view class="input-group">
        <view class="input-label">手机号</view>
        <view class="input-wrapper">
          <input 
            v-model="phone" 
            class="input-field" 
            type="number" 
            placeholder="请输入手机号"
            maxlength="11"
            @input="validatePhone"
          />
          <view class="input-icon">📱</view>
        </view>
        <view v-if="phoneError" class="error-msg">{{ phoneError }}</view>
      </view>
      
      <!-- 验证码输入框 -->
      <view class="input-group">
        <view class="input-label">验证码</view>
        <view class="input-wrapper">
          <input 
            v-model="code" 
            class="input-field" 
            type="number" 
            placeholder="请输入验证码"
            maxlength="6"
          />
          <view class="input-icon">🔒</view>
          <view 
            class="send-code-btn" 
            :class="{ disabled: !canSendCode || countdown > 0 }"
            @click="sendCode"
          >
            {{ countdown > 0 ? `${countdown}s后重新发送` : '发送验证码' }}
          </view>
        </view>
      </view>
      
      <!-- 登录按钮 -->
      <button 
        class="login-btn" 
        :class="{ disabled: !canLogin }"
        :disabled="!canLogin"
        @click="handleLogin"
      >
        登录
      </button>
      
      <!-- 协议提示 -->
      <view class="agreement">
        登录即表示同意
        <text class="agreement-link">《用户协议》</text>
        和
        <text class="agreement-link">《隐私政策》</text>
      </view>
    </view>
    
    <!-- 底部装饰 -->
    <view class="decoration-bottom"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      phone: '', // 手机号
      code: '', // 验证码
      phoneError: '', // 手机号错误提示
      countdown: 0, // 倒计时
      timer: null, // 定时器
    }
  },
  computed: {
    // 是否可以发送验证码
    canSendCode() {
      return this.phone.length === 11 && !this.phoneError && this.countdown === 0
    },
    // 是否可以登录
    canLogin() {
      return this.phone.length === 11 && !this.phoneError && this.code.length === 6
    }
  },
  methods: {
    // 验证手机号格式
    validatePhone() {
      const phoneRegex = /^1[3-9]\d{9}$/
      if (this.phone.length === 0) {
        this.phoneError = ''
      } else if (this.phone.length !== 11) {
        this.phoneError = '手机号长度不正确'
      } else if (!phoneRegex.test(this.phone)) {
        this.phoneError = '手机号格式不正确'
      } else {
        this.phoneError = ''
      }
    },
    
    // 发送验证码
    sendCode() {
      if (!this.canSendCode) return
      
      // 开始倒计时
      this.countdown = 60
      this.timer = setInterval(() => {
        this.countdown--
        if (this.countdown <= 0) {
          clearInterval(this.timer)
          this.timer = null
        }
      }, 1000)
      
      // 模拟发送验证码请求
      uni.showLoading({
        title: '发送中...'
      })
      
      setTimeout(() => {
        uni.hideLoading()
        uni.showToast({
          title: '验证码已发送',
          icon: 'success'
        })
        
        // 实际开发中这里调用发送验证码接口
        // this.$api.sendSmsCode({ phone: this.phone })
      }, 1500)
    },
    
    // 处理登录
    async handleLogin() {
      if (!this.canLogin) return
      
      uni.showLoading({
        title: '登录中...'
      })
      
      try {
        // 模拟登录请求
        await new Promise(resolve => setTimeout(resolve, 2000))
        
        // 实际开发中调用登录接口
        // const res = await this.$api.login({
        //   phone: this.phone,
        //   code: this.code
        // })
        
        uni.hideLoading()
        uni.showToast({
          title: '登录成功',
          icon: 'success'
        })
        
        // 登录成功后的处理
        setTimeout(() => {
          uni.switchTab({
            url: '/pages/my-page/my-page'
          })
        }, 1500)
        
      } catch (error) {
        uni.hideLoading()
        uni.showToast({
          title: '登录失败，请重试',
          icon: 'none'
        })
      }
    }
  },
  
  beforeDestroy() {
    // 清除定时器
    if (this.timer) {
      clearInterval(this.timer)
    }
  }
}
</script>

<style scoped>
.login-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #fefaf6 0%, #fff5f8 100%);
  display: flex;
  flex-direction: column;
  position: relative;
}

.decoration-top {
  height: 200rpx;
  background: linear-gradient(135deg, #ff9a76 0%, #ff6b9c 100%);
  border-radius: 0 0 40rpx 40rpx;
}

.login-form {
  flex: 1;
  padding: 60rpx 60rpx 40rpx;
  margin-top: -60rpx;
  background: #ffffff;
  border-radius: 30rpx;
  box-shadow: 0 10rpx 40rpx rgba(255, 107, 156, 0.1);
  margin: -60rpx 30rpx 0;
  z-index: 1;
  position: relative;
}

.login-title {
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 16rpx;
}

.login-subtitle {
  font-size: 28rpx;
  color: #999;
  text-align: center;
  margin-bottom: 60rpx;
}

.input-group {
  margin-bottom: 50rpx;
}

.input-label {
  font-size: 30rpx;
  color: #333;
  margin-bottom: 20rpx;
  font-weight: 500;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  border: 2rpx solid #f0f0f0;
  border-radius: 16rpx;
  padding: 24rpx 30rpx;
  background: #fafafa;
  transition: all 0.3s ease;
}

.input-wrapper:focus-within {
  border-color: #ff6b9c;
  background: #fff;
  box-shadow: 0 0 0 4rpx rgba(255, 107, 156, 0.1);
}

.input-field {
  flex: 1;
  font-size: 32rpx;
  color: #333;
  background: transparent;
}

.input-icon {
  margin-right: 20rpx;
  font-size: 36rpx;
}

.send-code-btn {
  background: linear-gradient(135deg, #ff9a76 0%, #ff6b9c 100%);
  color: white;
  padding: 16rpx 24rpx;
  border-radius: 12rpx;
  font-size: 24rpx;
  white-space: nowrap;
  transition: all 0.3s ease;
}

.send-code-btn.disabled {
  background: #ccc;
  color: #999;
}

.error-msg {
  color: #ff4757;
  font-size: 24rpx;
  margin-top: 16rpx;
}

.login-btn {
  background: linear-gradient(135deg, #ff9a76 0%, #ff6b9c 100%);
  color: white;
  border: none;
  border-radius: 16rpx;
  padding: 28rpx;
  font-size: 32rpx;
  font-weight: bold;
  margin-top: 40rpx;
  transition: all 0.3s ease;
}

.login-btn:active {
  transform: translateY(2rpx);
  opacity: 0.9;
}

.login-btn.disabled {
  background: #ccc;
  color: #999;
}

.agreement {
  text-align: center;
  font-size: 24rpx;
  color: #999;
  margin-top: 40rpx;
}

.agreement-link {
  color: #ff6b9c;
}

.decoration-bottom {
  height: 100rpx;
  background: linear-gradient(135deg, #ff9a76 0%, #ff6b9c 100%);
  border-radius: 40rpx 40rpx 0 0;
  margin-top: auto;
}
</style>